<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1786038_m62pqneyrzf.css">
    <link href="/godance/layui/src/css/layui.css" rel="stylesheet">
    <script src="/godance/layui/src/layui.js"></script>
    <script src="/godance/js/jquery-3.4.1.js"></script>
    <script src="/godance/js/My_js.js"></script>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
            font-family: JetBrains Mono Medium;
            display: flex;
            align-items: center;
            justify-content: center;
            /* background-color: #0e92b3; */
            background: url('image/sea2.png') no-repeat;
            background-size: 100% 100%;
        }

        .form-wrapper {
            width: 300px;
            background-color: rgba(41, 45, 62, .8);
            color: #fff;
            border-radius: 2px;
            padding: 50px;
        }

        .form-wrapper .header {
            text-align: center;
            font-size: 35px;
            text-transform: uppercase;
            line-height: 100px;
        }

        .form-wrapper .input-wrapper input {
            background-color: rgb(41, 45, 62);
            border: 0;
            width: 100%;
            text-align: center;
            font-size: 15px;
            color: #fff;
            outline: none;
        }

        .form-wrapper .input-wrapper input::placeholder {
            text-transform: uppercase;
        }

        .form-wrapper .input-wrapper .border-wrapper {
            background-image: linear-gradient(to right, #e8198b, #0eb4dd);
            width: 100%;
            height: 50px;
            margin-bottom: 20px;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .form-wrapper .input-wrapper .border-wrapper .border-item {
            height: calc(100% - 4px);
            width: calc(100% - 4px);
            border-radius: 30px;
        }

        .form-wrapper .action {
            display: flex;
            justify-content: center;
        }

        .form-wrapper .action .btn {
            width: 60%;
            text-transform: uppercase;
            border: 2px solid #0e92b3;
            text-align: center;
            line-height: 50px;
            border-radius: 30px;
            cursor: pointer;
        }

        .form-wrapper .action .btn:hover {
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }

        .form-wrapper .icon-wrapper {
            text-align: center;
            width: 60%;
            margin: 0 auto;
            margin-top: 20px;
            border-top: 1px dashed rgb(146, 146, 146);
            padding: 20px;
        }

        .form-wrapper .icon-wrapper i {
            font-size: 20px;
            color: rgb(187, 187, 187);
            cursor: pointer;
            border: 1px solid #fff;
            padding: 5px;
            border-radius: 20px;
        }

        .form-wrapper .icon-wrapper i:hover {
            background-color: #0e92b3;
        }
    </style>
</head>

<body>
<div class="form-wrapper">
    <div class="header">
        Drop
    </div>
    <div class="input-wrapper">
        <div class="border-wrapper">
            <input id="id" type="text" name="username" placeholder="username" class="border-item" autocomplete="off">
        </div>
        <div class="border-wrapper">
            <input id="pass" type="password" name="password" placeholder="password" class="border-item" autocomplete="off">
        </div>
    </div>
    <div class="action">
        <div id="btn" class="btn">Drop</div>
    </div>
    <div class="icon-wrapper" align="center">
        <a href="http://localhost:9090/godance/Register.html" ><font color="aqua">Register</font></a>
        <a href="http://localhost:9090/godance/login.html" ><font color="aqua">Login</font></a>
    </div>
</div>
</body>
</html>

<script type="text/javascript" src="/godance/js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    /**
     * 销户
     * */
    $(function () {
        $("#btn").click(function (){
            alert($("#id").val())
            alert($("#pass").val())
            $.ajax({
                url:"delete",
                data: {
                    "id":$("#id").val(),
                    "password":$("#pass").val()
                },
                dataType:"json",
                type:"post",
                success:function (result) {
                    layui.use('layer', function() {
                        var layer = layui.layer;
                        if (result.ok==false){
                            layer.msg(data.message,{icon:5});//失败的表情
                            return;
                        } else {
                            layer.confirm("删除成功", {
                                icon: 6,//成功的表情
                                time: 0,//不关闭（如果不配置，默认是3秒）
                                btn:["确认"]
                            }, function () {
                                localStorage.removeItem("token")
                                window.location.href='http://localhost:9090/index';
                            });
                        }
                    })
                }
            })
        })
    })
</script>